<script>
import { getManage, listLocation } from '@/api/yyj/wm/warehouse/details'
import { delManage, updateManage } from '@/api/yyj/wm/warehouse/manage'

export default {
  data() {
    const equalsToArea = (rule, value, callback) => {
      const regex = /^\d+(\.\d{1,2})?$/;
      if (!regex.test(value)) {
        callback(new Error('面积必须是数字，并且最多保留两位小数'));
      } else {
        callback();
      }
    };
    return {
      // 库区表格遮罩层
      loading: true,
      // 库位表格遮罩层
      locationLoading: true,
      // 总条数
      total: 0,
      // 库位表格数据
      locationList: [],
      // 弹出层标题
      title: '',
      // 是否显示修改仓库弹出层
      open: false,
      // 是否显示查询库位弹出层
      locationOpen: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        slSaCode: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        wCode: [
          { required: true, message: '仓库编码不能为空', trigger: 'blur' },
        ],
        wName: [
          { required: true, message: '仓库名称不能为空', trigger: 'blur' },
        ],
        wArea: [
          { required: true, message: '面积不能为空', trigger: 'blur' },
          { required: true, validator: equalsToArea, trigger: 'blur' }
        ],
        wManager: [
          { required: true, message: '负责人不能为空', trigger: 'blur' },
        ],
        wPosition: [
          { required: true, message: '位置不能为空', trigger: 'blur' },
        ],
        wDesc: [
          { required: false, message: '备注不能为空', trigger: 'blur' }
        ],
        createBy: [
          { required: true, message: '创建人不能为空', trigger: 'blur' },
        ],
        createTime: [
          { required: true, message: '创建时间不能为空', trigger: 'blur' },
        ],
      },
    }
  },
  created() {
    this.reset()
    this.getData()
  },
  methods: {
    // 查询仓库详情
    getData() {
      this.loading = true;
      let wCode = this.$route.query.wCode;
      getManage(wCode).then(response => {
        let formData = response.data
        this.form.wCode = formData.wCode
        this.form.wName = formData.wName
        this.form.wArea = formData.wArea
        this.form.wManager = formData.wManager
        this.form.wPosition = formData.wPosition
        this.form.wDesc = formData.wDesc
        this.form.createBy = formData.createBy
        this.form.createTime = formData.createTime
        this.form.updateBy = formData.updateBy
        this.form.updateTime = formData.updateTime
        this.form.storageAreaCount = formData.storageAreaCount
        if (formData.storageAreaCount > 0) {
          for (let i = 0; i < formData.wmStorageAreaList.length; i++) {
            this.form.wmStorageAreaList.push(formData.wmStorageAreaList[i])
          }
        } else {
          this.form.wmStorageAreaList = []
        }
        this.loading = false;
      })
    },
    // 重置表单
    reset() {
      this.form = {
        wCode: null,
        wName: null,
        wArea: null,
        wManager: null,
        wPosition: null,
        wDesc: '',
        createBy: null,
        createTime: null,
        updateBy: this.$store.state.user.name,
        updateTime: null,
        wmStorageAreaList: [],
        storageAreaCount: null
      }
      this.resetForm('form')
    },
    // 取消按钮
    cancel() {
      this.open = false
    },
    // 编辑仓库
    handleEdit() {
      this.open = true
      this.title = '修改仓库'
    },
    // 删除仓库
    handleDelete() {
      const wCode = this.form.wCode;
      const saCount = this.form.storageAreaCount;
      this.$modal.confirm('是否确认删除仓库编号为"' + wCode + '"的数据项？').then(() => {
        if (saCount > 0) {
          this.$modal.msgWarning("请先删除当前仓库的库区")
          return Promise.reject("Storage area count is greater than 0");
        }
        return delManage(wCode, saCount);
      }).then(() => {
        this.$modal.msgSuccess("删除成功");
        this.$tab.closeOpenPage();
        this.$tab.refreshPage({
          path: '/wm/warehouse/manage'
        });
      }).catch(() => {});
    },
    // 表单提交
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.form.updateBy = this.$store.state.user.name
          updateManage(this.form).then(() => {
            this.$modal.msgSuccess('修改成功')
            this.open = false;
            this.reset();
            this.getData();
          })
        }
      })
    },
    // 库位详情
    handleDetail(row) {
      this.locationLoading = true;
      if (row.saCode != null && row.saCode !== "") {
        this.queryParams.slSaCode = row.saCode;
      }
      this.title = "库位详情"
      this.locationOpen = true;
      listLocation(this.queryParams).then(response => {
        this.locationList = response.rows;
        this.total = response.total;
        this.locationLoading = false;
      })
    },
    /** 库位状态处理 */
    handleStatus(cellValue) {
      return cellValue === 1 ? '启用' : '禁用';
    },
  }
}
</script>

<template>
  <div class="app-container">
    <div class="details">
      <div class="my-detail-header">
        <div>
          <span style="
          font-size: medium;
          margin-right: 5px;
          vertical-align: bottom;">
            {{ form.wName }}
          </span>
          <span style="color: #606266; font-size: x-small; vertical-align: bottom">{{ form.wCode }}</span>
        </div>
        <el-descriptions :column="4" style="margin-top: 15px;">
          <el-descriptions-item label="创建人">{{ form.createBy }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ form.createTime }}</el-descriptions-item>
          <el-descriptions-item label="修改人">{{ form.updateBy }}</el-descriptions-item>
          <el-descriptions-item label="修改时间">{{ form.updateTime }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <el-divider />

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            @click="handleEdit"
            v-hasPermi="['wm:warehouse:manage:edit']"
          >编辑</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            @click="handleDelete"
            v-hasPermi="['wm:warehouse:manage:remove']"
          >删除</el-button>
        </el-col>
      </el-row>

      <el-divider>
        <div class="my-divider">基础信息</div>
      </el-divider>

      <el-form ref="form" :model="form" label-width="100px" size="small">
        <el-row :gutter="290" class="mb8">
          <el-col :span="8" :offset="2">
            <el-form-item label="仓库名称">{{form.wName}}</el-form-item>
            <el-form-item label="位置">{{form.wPosition}}</el-form-item>
            <el-form-item label="负责人">{{form.wManager}}</el-form-item>
            <el-form-item label="备注">{{form.wDesc}}</el-form-item>
          </el-col>
          <el-col :span="6" :offset="2">
            <el-form-item label="仓库编号">{{form.wCode}}</el-form-item>
            <el-form-item label="面积">{{form.wArea}}</el-form-item>
            <el-form-item label="库区数量">{{form.storageAreaCount}}</el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-divider>
        <div class="my-divider">库区信息</div>
      </el-divider>

      <el-table v-loading="loading" :data="form.wmStorageAreaList" border fit highlight-current-row class="tb-edit">
        <el-table-column label="库区名称" prop="saName" align="center" />
        <el-table-column label="库区编号" prop="saCode" align="center" />
        <el-table-column label="面积" prop="saArea" align="center" />
        <el-table-column label="库位数量" prop="storageLocationCount" align="center" />
        <el-table-column label="备注" prop="saDesc" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" plain size="mini" @click="handleDetail(scope.row)">查看库位</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 修改仓库对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="仓库名称" prop="wName">
          <el-input v-model="form.wName" placeholder="请输入仓库名称" />
        </el-form-item>
        <el-form-item label="面积" prop="wArea">
          <el-input v-model="form.wArea" placeholder="请输入面积" />
        </el-form-item>
        <el-form-item label="负责人" prop="wManager">
          <el-input v-model="form.wManager" placeholder="请输入负责人" />
        </el-form-item>
        <el-form-item label="位置" prop="wPosition">
          <el-input v-model="form.wPosition" placeholder="请输入位置" />
        </el-form-item>
        <el-form-item label="备注" prop="wDesc">
          <el-input
            v-model="form.wDesc"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 查看库位对话框 -->
    <el-dialog :title="title" :visible.sync="locationOpen" width="1100px" append-to-body>
      <el-table v-loading="locationLoading" :data="locationList" border fit highlight-current-row class="tb-edit">
        <el-table-column label="库位名称" align="center" prop="slName" />
        <el-table-column label="库位编码" width="150" align="center" prop="slCode" />
        <el-table-column label="面积" align="center" prop="slArea" />
        <el-table-column label="最大载重量" align="center" prop="slMaxWeight" />
        <el-table-column label="库位位置x" align="center" prop="slLocationX" />
        <el-table-column label="库位位置y" align="center" prop="slLocationY" />
        <el-table-column label="库位位置z" align="center" prop="slLocationZ" />
        <el-table-column label="状态" align="center" prop="slStatus" :formatter="handleStatus" />
        <el-table-column label="备注" align="center" prop="slDesc" />
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="handleDetail"
      />
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.details {
  width: 1000px;
  margin: 0 auto;
}
</style>
